<template>
  <view class="invoicingInfo_container">
    <view class="company">
      <view>
        <text class="star">*</text>
        <text class="name">公司名称：</text>
        <text class="value">{{ company }}</text>
        <img :src="staticUrl() + '/carts/moreRule.png'" class="arrow" @click="switchCompany" />
      </view>
      <view>
        <text class="star">*</text>
        <text class="name">公司税号：</text>
        <input type="text" v-model="taxID" class="value" />
      </view>
      <view>
        <text class="name">开户账号：</text>
        <input type="text" v-model="bankCardNo" class="value" />
      </view>
      <view>
        <text class="name">开户银行：</text>
        <textarea type="text" v-model="bankName" class="value" auto-height></textarea>
      </view>
      <view>
        <text class="name">公司注册地 址、电话：</text>
        <textarea type="text" v-model="address" class="value" auto-height></textarea>
      </view>
    </view>
    <view class="bg" v-if="companyInfoShowStatus" @click.stop="companyInfoShowStatus = false">
      <view class="box">
        <view v-for="(item, index) in list" :key="index" class="box_item"
          :class="item.active ? 'box_active' : ''" @click.stop="clickBoxItem(item)">
          <text>{{ item.name }}</text>
          <text>√</text>
        </view>
      </view>
    </view>
    <view class="remarks">
      <text class="remarks_title">发票备注</text>
      <textarea placeholder="请填写您的发票备注" v-model="textarea" @input="sumfontnum"
        placeholder-style="font-size:28rpx;color:#ADADAD;" :maxlength="maxlength">
      </textarea>
      <text class="text2">{{ fontNum }}/{{ maxlength }}</text>
    </view>
    <view class="company">
      <view>
        <text class="name">接收电话：</text>
        <input type="text" v-model="mobile" class="value" />
      </view>
      <view>
        <text class="name">邮箱地址：</text>
        <input class="value" inputmode="email" type="email" v-model="email"
          placeholder="用于向您发送电子发票" />
      </view>
    </view>
    <view class="mattersNeedingAttention">
      <view class="tips">
        <text>注意事项</text>
        <view>带<text>*</text>号为必填信息，请您核实开票信息，如发票有误或需要变更，请联系平台客服更改。</view>
      </view>
    </view>
    <view style="height: 200rpx"></view>

    <view class="bottom_button" @click="submit"> 提交 </view>

    <Dialog :dialog="dialog" :title="title" :content="content" @confirm="dialogConfirm"
      @cancel="dialogCancel">
    </Dialog>
  </view>
</template>

<script>
import Dialog from '@/components/dialog'
import { getRelevances } from '@/api/login/wechat.js'
import { applyInvoicing } from '@/api/invoice'

export default {
  components: { Dialog },
  data () {
    return {
      dialog: false,
      title: '温馨提示',
      content: '确认提交吗',
      radio: '',
      company: '',
      taxID: '',
      list: [],
      textarea: '',
      fontNum: 0,
      maxlength: 30,
      companyInfoShowStatus: false,
      receiptPrice: 0,
      orderSns: [],
      taxpayerId: '',
      purchaserId: '',
      bankName: '',
      bankCardNo: '',
      address: '',
      mobile: '',
      email: ''
    }
  },
  onLoad (e) {
    // radio true是普票 false是专票
    this.radio = e.radio
    this.receiptPrice = e.receiptPrice
    this.orderSns = JSON.parse(e.orderSns)
    this.getData()
  },
  methods: {
    dialogCancel () {
      this.dialog = false
    },
    dialogConfirm () {
      let a = {
        type: this.radio,
        taxpayerNo: this.taxID,
        remark: this.textarea,
        receiptPrice: this.receiptPrice,
        receiptTitle: this.company,
        mobile: this.mobile,
        email: this.email,
        bankName: this.bankName,
        bankCardNo: this.bankCardNo,
        orderSns: this.orderSns
      }
      applyInvoicing(a).then(res => {
        if (res.code === 200) {
          uni.showToast({ icon: 'none', title: '提交成功', mask: true })
          uni.navigateTo({ url: `/subpackage/invoice/record?selectTitle=NEW` })
        }
      })
    },
    clickBoxItem (e) {
      if (e.name !== this.company) {
        this.list.forEach(i => {
          i.active = false
        })
        e.active = true
        this.company = e.name
        this.taxID = e.taxpayerNo
        this.bankName = e.bankName
        this.bankCardNo = e.bankCardNo
        this.address = e.address
        this.mobile = e.mobile
      }
      this.companyInfoShowStatus = false
    },
    switchCompany () {
      this.companyInfoShowStatus = true
    },
    submit () {
      let re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/
      if (this.email) {
        if (!re.test(this.email)) {
          uni.showToast({ icon: 'none', title: '邮箱填写错误', mask: true })
          return
        }
      }
      this.dialog = true
    },
    sumfontnum (e) {
      this.fontNum = e.detail.value.length
    },
    getData () {
      getRelevances().then(res => {
        if (res.code === 200) {
          this.list = res.data
          this.list.forEach(i => {
            if (i.active) {
              this.company = i.name
              this.taxID = i.taxpayerNo
              this.bankName = i.bankName
              this.bankCardNo = i.bankCardNo
              this.address = i.address
              this.mobile = i.mobile
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.invoicingInfo_container {
  min-height: 100vh;
  background: #f9f9f9;
  overflow: hidden;

  .company {
    border-radius: 10rpx;
    background: #fff;
    margin-top: 20.83rpx;
    view {
      font-size: 29rpx;
      padding: 27.08rpx 0;
      border-bottom: 1px solid #f9f9f9;
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      .star {
        color: #ef231b;
        margin-left: 28.47rpx;
        margin-right: 8.92rpx;
        position: absolute;
      }
      .name {
        display: inline-block;
        width: 25%;
        text-align: end;
      }
      .value {
        width: 55%;
        margin-left: 16.97rpx;
      }
      .arrow {
        width: 20rpx;
        height: 10rpx;
        position: absolute;
        top: 6.11rpx;
        right: 0;
        padding: 30rpx;
      }
    }
  }

  .remarks {
    background: #fff;
    margin-top: 20.83rpx;
    position: relative;
    height: 293rpx;

    .remarks_title {
      display: block;
      font-size: 29rpx;
      margin: 0 0 20.14rpx 28.47rpx;
      padding-top: 27.08rpx;
    }

    textarea {
      box-sizing: border-box;
      width: calc(100% - 41.66rpx);
      height: 190rpx;
      background: #f9f9f9;
      border-radius: 11rpx;
      margin: 0 20.83rpx;
      padding: 30.56rpx 22.22rpx 50.56rpx;
    }

    .text2 {
      position: absolute;
      bottom: 47.92rpx;
      right: 49.31rpx;
      font-size: 25rpx;
      color: #adadad;
    }
  }

  .mattersNeedingAttention {
    height: 260rpx;
    background: #ffffff;
    border-radius: 10rpx;
    margin-top: 20.83rpx;
    padding: 27.78rpx;

    .tips {
      height: 205rpx;
      background: #ffffff;
      border: 2px dashed #f9f9f9;
      border-radius: 11rpx;
      padding: 41.67rpx 76.39rpx 0 20.83rpx;

      text {
        display: block;
        font-size: 29rpx;
        font-weight: 500;
        margin-bottom: 28.47rpx;
      }

      view {
        font-size: 25rpx;
        line-height: 2;
        text {
          display: inline;
          color: red;
        }
      }
    }
  }

  .bottom_button {
    width: 678rpx;
    height: 80rpx;
    background: #2871fc;
    border-radius: 40rpx;
    color: #ffffff;
    font-size: 29rpx;
    line-height: 80rpx;
    text-align: center;
    position: fixed;
    left: 36.11rpx;
    bottom: 87.5rpx;
  }

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #000, $alpha: 0.05);
    z-index: 20;

    .box {
      width: 479rpx;
      height: 750rpx;
      background: #ffffff;
      box-shadow: 0rpx 3rpx 28rpx 0rpx rgba(40, 113, 252, 0.11);
      border-radius: 7rpx;

      box-sizing: border-box;
      position: fixed;
      top: 80rpx;
      left: 243.75rpx;
      padding: 41.67rpx 22.22rpx;

      .box_item {
        display: flex;
        justify-content: space-between;
        font-size: 29rpx;
        line-height: 1;
        margin-bottom: 42.36rpx;
      }

      .box_active {
        color: #2871fc;
      }
    }
  }

  .container_dialog {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    background: rgba($color: #000000, $alpha: 0.2);
    .dialog {
      width: 615rpx;
      height: 289rpx;
      background: #ffffff;
      border-radius: 11rpx;
      margin: 50% auto 0;
      .title {
        font-size: 42rpx;
        padding: 40.28rpx 0 27.08rpx;
        text-align: center;
        line-height: 1;
      }
      .content {
        font-size: 28rpx;
        color: #585858;
        // padding-bottom: 25.69rpx;
        padding-bottom: 50rpx;
        text-align: center;
        line-height: 1;
      }
      .btn {
        padding: 0 46.84rpx;
        display: flex;
        justify-content: space-between;
        text {
          display: inline-block;
          width: 236.11rpx;
          height: 57.64rpx;
          line-height: 57.64rpx;
          border-radius: 50rpx;
          text-align: center;
          font-size: 29rpx;
        }
        .cancelText {
          color: #2871fc;
          border: 1px solid #2871fc;
        }
        .confirmText {
          color: #fff;
          background: #2871fc;
        }
      }
    }
  }
}
</style>
